var vm = new Vue({
    el: "#app",
    data: {
      comName: '推荐哈',
      // tabs: ['推荐哈1', '推哈哈2', '哈哈推3', '哈哈推4', '哈哈推5']
      tabs: [],
      type_id: null,//当前列表类型的id
      page: 1,//当前页数
      limit: 10,//限制条数
      render_list: [],
      isLoading: false,//上拉刷新时加载中
      myloadding: false,//切换时加载中
      list_loading: false,//上拉加载的加载中
      list_finished: false,//上拉加载完成,没有更多数据时
      lock:false,
      search_key:'',
    },
    created: function () {
      this.init();
      //
    },
    watch: {
      search_key:function(){
        if(!this.search_key){
          // 当搜索词为空时清空render_list
          this.render_list = [];
        }
      }
    },
    mounted: function () {
    },
    methods: {
      init: function () {
        // var that = this;
        // $.ajax({
        //   url: app.webUrl + "/view/api_activity/typelist",
        //   data: { type: 1 },
        //   type: "POST",
        //   success: function (ret) {
        //     if (ret.code == '1') {
        //       console.log(ret);
        //       for (i in ret.data) {
        //         vm.tabs.push(ret.data[i]);
        //       };
        //       // tabs的第一项为默认项
        //       that.tabs[0].istag = true;
        //       that.type_id = that.tabs[0].id;
        //       // 获取列表
        //       that.myloadding = true;
        //       that.get_list(suc, err);
        //       function suc() {
        //         // that.myloadding = false;
        //         // 只有当lock为true时才让组件实行加载的方法
        //         that.open_lock();
        //       }
        //       function err() {
        //         that.myloadding = false;
        //       }
        //       zujian();
        //     }
        //   }
        // });

      },
      // 搜索
      searchStart:function(){
        var that = this;
        // 当搜索词为空的时候
        if(that.search_key == ''){
          vant.Toast('搜索词不能为空');
          that.render_list = [];
          that.list_finished = true;
          return;
        }
        that.render_list = [];
        that.page = 1;
        that.list_finished = false;
        that.list_loading = false;
        that.lock = false;
        that.get_list(suc);
        function suc(ret){
          that.open_lock();
          // console.log(ret.data.length);
          // 数组为空的时候提示无结果
          if(ret.data.length ==0 ){
            vant.Toast('搜索无结果...');
            that.list_finished = true;
          }
        };
        function err(){
          that.open_lock();
          vant.Toast('网络错误');
        }
      },
      //返回上一个页面
      back:function(){
        window.history.back();
      },
      // 选择顶部栏
      chooseTab: function (tab) {
        this.tabs.forEach(function (item) {
          item.istag = false;
        });
        tab.istag = true;
        this.type_id = tab.id;
        var that = this;
        // 更新列表
        this.page = 1;
        this.render_list = [];
        this.myloadding = true;
        this.get_list(suc, err);
        function suc() {
          that.myloadding = false;
          that.list_finished = false;
          that.list_finished = false;
        }
        function err() {
          that.myloadding = false;
          that.list_finished = false;
          that.list_finished = false;
        }
        this.$forceUpdate();
      },
      // 获取列表
      get_list: function (suc, err) {
        var that = this;
        var data = {
          page: that.page,
          limit: that.limit,
          // 搜索页面不需要type
          // type: that.type_id
          search:that.search_key
        };
        $.post(app.webUrl + '/view/api_activity/lists', data, function (ret) {
          if (ret.code == '1') {
            ret.data.forEach(function (item) {
              that.render_list.push(item);
            });
            that.page++;
            // 成功的回掉函数
            if (typeof suc == 'function') {
              suc(ret);
            }
          } else {
            if (typeof err == 'function') {
              // 失败的回掉函数
              err(ret);
            }
          }
        }).fail(function (err) {
          err();
        })
      },
      // 下拉刷新
      onRefresh: function () {
        var that = this;
        if(that.search_key == ''){
          vant.Toast('搜索词不能为空');
          that.render_list = [];
          that.list_finished = true;
          return;
        }
        that.lock = false;
        that.page = 1;
        that.render_list = [];
        this.get_list(suc, err);
        function suc() {
          vant.Toast('刷新成功');
          that.isLoading = false;
          that.list_finished = false;
          that.list_finished = false;
          that.open_lock();
        }
        function err() {
          vant.Toast('刷新失败');
          that.isLoading = false;
          that.list_finished = false;
          that.list_finished = false;
        }
      },
      // 上拉加载,jiaye
      onLoad:function(){
        var that = this;
        if(!that.lock){
          that.list_loading = false;
          return;
        }
        this.get_list(suc,err);
        //
        function suc(ret){
          // 加载状态结束
          that.list_loading = false;
          if(ret.data.length == 0){
            that.list_finished = true;
          }
        }
        //
        function err(ret){
          // 加载状态结束
          that.list_loading = false;
        }
      },
      // 打开lock
      open_lock:function(){
        var that = this;
        // 设一个延迟
        setTimeout(function(){
          that.lock = true;
        },1000)
      },
      // 跳转
      link:function(id){
        window.location.href = 'http://wx191210.slyz.info:580/view/activity/hdxq.html?&activityId='+id;
      }
    }
    // components: {
    //   'component-a': {
    //     template: `<button>{{msg}}</button>`,
  
    //     // data数据
    //     data: function() {
    //       return {
    //         msg: 'Rabbit'
    //       }
    //     }
    //   },
    //   // 'component-b': ComponentB
    // },
  })
  function zujian() {
    console.log(11111);
  
    console.log(vm.tabs[0].name);
    Vue.component(vm.tabs[0].name, {
      template: `
      <li @click="go_hdxq">
        <div class="logo"><img src="/public/img/wx.png" alt=""></div>
        <div class="cont">
          <p class="cont_name">
            <span>必胜客啊啊</span>
            <span style="margin: 0 2px;">|</span>
            <span>100元代金券·中行</span>
            <span style="margin: 0 2px;">|</span>
            <span>天天有券</span>
          </p>
          <p class="cont_price">
            <span>活动价:22元</span>
            <span>最近成交价:33元</span>
            <span><img src="/public/img/yanjing.png" alt="">2100</span>
          </p>
        </div>
      </li>
      `,
      methods: {
        go_hdxq() {
          window.location.href = "/view/activity/hdxq.html";
        }
      }
    })
  
    Vue.component(vm.tabs[1].name, {
      template: ` 
    <li @click="go_hdxq">
      <div class="logo"><img src="/public/img/zhifubao.png" alt=""></div>
      <div class="cont">
        <p class="cont_name">
          <span>必胜客啊啊</span>
          <span style="margin: 0 2px;">|</span>
          <span>100元代金券·中行</span>
          <span style="margin: 0 2px;">|</span>
          <span>天天有券</span>
        </p>
        <p class="cont_price">
          <span>活动价:33元</span>
          <span>最近成交价:44元</span>
          <span><img src="/public/img/yanjing.png" alt="">2100</span>
        </p>
      </div>
    </li>
    1111
    `,
      methods: {
        go_hdxq() {
          window.location.href = "/view/activity/hdxq.html";
        }
      }
    })
    Vue.component(vm.tabs[2].name, {
      template: `
    <li @click="go_hdxq">
      <div class="logo"><img src="/public/img/qq.png" alt=""></div>
      <div class="cont">
        <p class="cont_name">
          <span>必胜客啊啊</span>
          <span style="margin: 0 2px;">|</span>
          <span>100元代金券·中行</span>
          <span style="margin: 0 2px;">|</span>
          <span>天天有券</span>
        </p>
        <p class="cont_price">
          <span>活动价:22元</span>
          <span>最近成交价:33元</span>
          <span><img src="/public/img/yanjing.png" alt="">2100</span>
        </p>
      </div>
    </li>
    `,
      methods: {
        go_hdxq() {
          window.location.href = "/view/activity/hdxq.html";
        }
      }
    })
    Vue.component(vm.tabs[3].name, {
      template: `
    <li @click="go_hdxq">
      <div class="logo"><img src="/public/img/wxpyq.png" alt=""></div>
      <div class="cont">
        <p class="cont_name">
          <span>必胜客啊啊</span>
          <span style="margin: 0 2px;">|</span>
          <span>100元代金券·中行</span>
          <span style="margin: 0 2px;">|</span>
          <span>天天有券</span>
        </p>
        <p class="cont_price">
          <span>活动价:33元</span>
          <span>最近成交价:44元</span>
          <span><img src="/public/img/yanjing.png" alt="">2100</span>
        </p>
      </div>
    </li>
    `,
      methods: {
        go_hdxq() {
          window.location.href = "/view/activity/hdxq.html";
        }
      }
    })
    Vue.component(vm.tabs[4].name, {
      template: `
    <li @click="go_hdxq">
      <div class="logo"><img src="/public/img/chong.png" alt=""></div>
      <div class="cont">
        <p class="cont_name">
          <span>必胜客啊啊</span>
          <span style="margin: 0 2px;">|</span>
          <span>100元代金券·中行</span>
          <span style="margin: 0 2px;">|</span>
          <span>天天有券</span>
        </p>
        <p class="cont_price">
          <span>活动价:22元</span>
          <span>最近成交价:33元</span>
          <span><img src="/public/img/yanjing.png" alt="">2100</span>
        </p>
      </div>
    </li>
    `,
      targetmethods: {
        go_hdxq() {
          window.location.href = "/view/activity/hdxq.html";
        }
      }
    })
    vm.comName = vm.tabs[1].name;
    vm.comName = vm.tabs[0].name;
  }
  
  
  
  
  
  
  
  // 点击筛选按钮跳到筛选页面
  $('.header-nav .shaixuan').click(function () {
    window.location.href = "/view/activity/fenleixuanze.html";
  })
  
  // 点击活动跳到活动详情页面
  // $('main ul li' ).click(function() {
  //   window.location.href="../../components/activity/html/hdxq.html";
  // })
  function go_hdxq() {
    window.location.href = "/view/activity/hdxq.html";
  }
  
  
  function fabu() {
    $('.fabu').show()
    console.log('11111')
    $('body').css('overflow-y', 'hidden')
  }
  
  function cancel() {
    $('.fabu').hide()
    console.log('11111')
    $('body').css('overflow-y', 'visible')
  }